<template>
	<view class="wrap">
		<u-navbar title="虚拟裝備" :auto-back="true" left-icon-color="#fff" titleStyle="color:#fff" bg-color="transparent" ></u-navbar>
		<view class="topbar">
			<image class="bg" src="/static/zbbg1.png" mode=""></image>
			<image class="body" v-if="team == 'red'" src="/static/body.png" mode=""></image>
			<image class="body" v-else src="/static/body1.png" mode=""></image>
			<view class="right">
				<view class="title">已裝備的道具</view>
				<view class="list bgimg">
					<view class="item " :class="{'selected': goodsCIndex === index}" v-for="(item,index) in equipments" :key="index" @click="changeUnGoods(item, index)">
						<image v-if="item" :src="item.equipment.cover_image" mode=""></image>
					</view>
					
				<!-- 	<view class="list dc">
						<view class="item">
							<image src="../../static/zbbg.png" mode=""></image>
						</view>
						<view class="item">
							<image src="../../static/zbbg.png" mode=""></image>
						</view>
						<view class="item">
							<image src="../../static/zbbg.png" mode=""></image>
						</view>
						<view class="item">
							<image src="../../static/zbbg.png" mode=""></image>
						</view>
					</view> -->
				</view>
				<view class="zb" @click="put">
					<image :src="goodsIndex !== '' ? '/static/zbzb.png' : '/static/zbzb1.png'" mode=""></image>
					<text>裝備</text>
				</view>
				<view class="zb c" @click="down">
					<image :src="goodsCIndex !== '' ? '/static/zbqx1.png' : '/static/zbqx.png'" mode=""></image>
					<text>取消</text>
				</view>
				<view class="btn" @click="yulan">預覽效果</view>
			</view>
		</view>
		
		<view class="content">
			<view class="check">
				<view class="item" :class="{'active': team == 'red'}" @click="changeTeam('red')">
					<image :src="team == 'red' ? '/static/zb_bai.png' : '/static/zb_hei.png'" mode=""></image>
					红色裝備
				</view>
				<view class="item" :class="{'active1': team == 'blue'}" @click="changeTeam('blue')">
					<image :src="team == 'blue' ? '/static/zb_bai.png' : '/static/zb_hei.png'" mode=""></image>
					蓝色裝備
				</view>
			</view>
			
			<view class="catelist">
				<view class="item" @click="changeCate(index)" v-for="(item, index) in cateList" :class="{'active': cateIndex === index}" :key="index">
					{{item.name}}
				</view>
			</view>
			
			<view class="goodslist">
				<view class="item" @click="changeGoods(index)" v-for="(item, index) in goodslist" :class="{'active': goodsIndex === index}" :key="index">
					<image :src="item.cover_image" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				user: uni.getStorageSync('userInfo'),
				cateList: [],
				team: 'red',
				cateIndex: 0,
				goodslist: [],
				goodsIndex: '',
				goodsCIndex: '', // 取消装备索引
				
				equipments: [null,null,null,null],
			}
		},
		async onLoad() {
			try {
				await this.initSlot()
				this.getTeamConfig()
				await this.getCate()
				// this.getConfig()
				this.getCanUpList()
			} catch (error) {
				console.error(error)
				//TODO handle the exception
			}
			
		},
		computed:{
			null_position () {
				let index = ''
				for (let i = 0; i < this.equipments.length; i++) {
				  if (!this.equipments[i]) {
					index = i
				    break;
				  }
				}
				return index
			}
		},
		methods: {
			async getUser() {
				let res = await uni.$u.http.post('user/index');
				this.user = res
				
			},
			yulan(){
				this.toast('敬请期待')
			},
			async put(){
				if (this.goodsIndex === '') return this.toast('请选择裝備的道具')
				
				let res = await uni.$u.http.post('user_equipment/equipDevice', {
					equipment_id: this.goodslist[this.goodsIndex].equipment_id,
					team: this.team,
					slot_position: this.null_position + 1,
				});
				this.goodsIndex = ''
				
				this.getTeamConfig()
				this.getCanUpList()
			},
			async down(){
				if (this.goodsCIndex === '') return this.toast('请选择取消的道具')
				let res = await uni.$u.http.post('user_equipment/unequipDevice', {
					team: this.team,
					slot_position: this.goodsCIndex + 1 ,
				});
				this.goodsCIndex = ''
				this.getTeamConfig()
				this.getCanUpList()
			},
			changeUnGoods(item, index){
				if (!item || index === this.goodsCIndex) {
					this.goodsCIndex = ''
					return
				} 
				this.goodsCIndex = index
			},
			changeGoods(index){
				if (index === this.goodsIndex) {
					this.goodsIndex =  ''
					 return
				}
				this.goodsIndex = index
			},
			changeCate(index){
				this.cateIndex = index
				
				this.getCanUpList()
			},
			changeTeam(team){
				this.goodsCIndex = ''
				this.goodsIndex = ''
				this.team = team
				this.getCanUpList()
				this.getTeamConfig()
			},
			async getCate() {
				let res = await uni.$u.http.post('virtual_equipments/getCategoryList');
				this.cateList = res
			},
			// 初始化装备插槽
			async initSlot() {
				try {
					if (this.user.init_slots > 0) {
						return true
					}
					let res = await uni.$u.http.post('user_equipment/initSlots');
					uni.hideToast()
					this.getUser()
				} catch (error) {
					console.error(error)
					//TODO handle the exception
				}
				
			},
			// // 获取装备配置
			// async getConfig() {
			// 	let res = await uni.$u.http.post('user_equipment/getConfig', {
					
			// 	});
			// },
			// 获取指定队伍的装备配置
			async getTeamConfig() {
				let res = await uni.$u.http.post('user_equipment/getTeamConfig', {
					team: this.team, // red blue
				});
				console.log("获取指定队伍的装备配置", res)
				const arr = [null,null,null,null]
				if (res.config.equipments.length) {
					
					res.config.equipments.forEach(e => {
						arr[e.slot_position - 1] = e
					})
				}
				this.equipments = arr
				console.log('获取指定队伍的装备配置', res)
			},
			// 获取用户可装备的设备列表
			async getCanUpList() {
				if (this.cateList.length === 0) return
				uni.showLoading()
				let res = await uni.$u.http.post('user_equipment/getAvailableEquipments', {
					category_id: this.cateList[this.cateIndex].id,
					team: this.team, // red blue
				});
				uni.hideLoading()
				this.goodslist = res.equipments || []
			},
			// 获取用户装备统计信息
			async getStats() {
				let res = await uni.$u.http.post('user_equipment/getStats', {
					category_id: "",
					team: "", // red blue
				});
			},
			toast(title){
				uni.showToast({
					title,
					icon: "none"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.topbar {
		height: 820rpx;
		position: relative;
		.bg {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 100%;
		}
		.body {
			position: absolute;
			bottom: 71rpx;
			left: 60rpx;
			width: 338rpx;
			height: 496rpx;
		}
		.right {
			position: absolute;
			height: 496rpx;
			bottom:71rpx;
			right: 30rpx;
			width: 320rpx;
			color: #fff;
			.title {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #FFFFFF;
			}
			.list {
				display: flex;
				flex-wrap: wrap;
				position: relative;
				.item {
					width: 140rpx;
					height: 140rpx;
					margin-right: 20rpx;
					margin-top: 20rpx;
					background: linear-gradient( 180deg, #FFFFFF 0%, #FFE2E3 100%);
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					display: flex;
					justify-content: center;
					box-sizing: border-box;
					align-items: center;
					&.selected{
						border: 3rpx solid rgba(234, 77, 68, 1);
					}
					image {
						width: 80%;
						height: 80%;
					}
				}
				.list {
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			
			.zb {
				position: absolute;
				right: 270rpx;
				bottom: 0rpx;
				width: 82rpx;
				height: 89rpx;
				color: #fff;
				&.c {
					right: 180rpx;
				}
				image {
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 0;
					top: 0;
					left: 0;
				}
				text {
					position: absolute;
					z-index: 1;
					bottom: 0;
					width: 100%;
					text-align: center;
					font-size: 20rpx;
				}
			}
			.btn {
				position: absolute;
				right: 10rpx;
				bottom: 0rpx;
				width: 150rpx;
				height: 70rpx;
				background: linear-gradient( 130deg, #F69792 0%, #EA4D44 100%);
				border-radius: 40rpx;
				color:#fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
			}
		}
	}

	.content {
		margin-top: -40rpx;
		border-radius: 40rpx 40rpx 0 0;
		background-color: #fff;
		position: relative;
		z-index: 1;
		padding: 30rpx;
	}
	.check {
		height: 80rpx;
		line-height: 80rpx;
		background: #F8F9FD;
		border-radius: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #1D2541;
		text-align: center;
		display: flex;
		.item {
			width: 50%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
			&.active {
				background: linear-gradient( 130deg, #F69792 0%, #EA4D44 100%);
				border-radius: 40rpx;
				color: #fff;
			}
			&.active1 {
				background: linear-gradient( 90deg, #487DE8 0%, #009DC8 100%);
				border-radius: 40rpx;
				color: #fff;
			}
			
		}
	}

	.catelist {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		.item {
			border-radius: 23rpx;
			height: 42rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #7C8191;
			text-align: center;
			&.active {
				color: #EA4D44;
				// box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(0,0,0,0.06);
			}
		}
	}
	.goodslist {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		.item {
			width: 158rpx;
			height: 158rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			&:nth-child(4n) {
				margin-right: 0;
			}
			&.active {
				box-shadow:inset 158rpx 158rpx rgba(255, 226, 227, .5);
				border: 3rpx solid rgba(234, 77, 68, 1);
			}
			image {
				width: 80%;
				height: 80%;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
			}
		}
	}
</style>
